<template>
  <div class="dept-wrap" :style="sceneid==='sstbg'?'height:640px;':''">
    <el-row>
      <div v-if="showUpArrow" class="slide-arrow slide-up"><i @click="pageTurning('up')" class="el-icon-arrow-up"></i></div>
      <el-tabs tab-position="left" @tab-click="tabClick">
        <el-tab-pane v-for="( item, index ) in pageList" :key="index" :label="item.deptName">
          <el-row :gutter="20">
            <el-col style="margin-bottom:22px" v-for="( child, index ) in deptList" :key="index" :span="6">
              <el-button @click="select(child)" style="width: 100%;font-size:21px;" type="primary">{{ child.deptName }}</el-button>
            </el-col>
          </el-row>
          <div style="text-align:center;margin:10px;">
            <el-pagination 
            layout="prev, pager, next" 
            :total="deptTotal"
            :page-size="deptSize"
            @size-change="deptSizeChange($event,index)"
            @current-change="deptCurrentChange($event,index)">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div v-if="showDownArrow" class="slide-arrow slide-down"><i @click="pageTurning('down')" class="el-icon-arrow-down"></i></div>
    </el-row>
  </div>
</template>

<script>
import { queryDepartment } from '@api/data'
export default {
  name: "Mzks",
  data() {
    return {
      sceneid:this.$store.state.terminfo.seceninfo.sceneid,
      currentPage: 0,
      pageSize: 8,
      childrenTemp: [], // 创建子级数组，先暂存子集的数据
      parentsTemp: [],  // 创建父级数组，先暂存父集的数据
      listInfo: [],
      showUpArrow: false,
      showDownArrow: false,
      pageList: [],  // 显示在分页中的内容
      deptSize: 28, // 科室按钮分页的每页最大条目数
      deptCurrent: 0, // 科室按钮分页的当前页码
      deptList: [], // 科室按钮的当前页显示内容
      deptTotal: 0  // 科室按钮的总数
    };
  },
  props: {
    msg: String,
    mzgh: Object
  },
  mounted() {
    this.query();
  },
  methods: {
    tabClick(data){
      this.deptTotal = this.listInfo[data.index].children.length
      this.deptList = this.listInfo[data.index].children.slice(this.deptCurrent*this.deptSize, (this.deptCurrent+1)*this.deptSize)
    },
    select(data) {
      this.$store.dispatch('appointment/updateDepartment', data)
      this.$emit('selectDept', data)   
    },
    // 格式化数据
    formatData(data) {
      // 整理返回数组有用的数据，存放在newItems
      data.map( item => {
        if( item.pDeptId != "" || item.pDeptId != null || item.pDeptId != undefined ){
          // 返回值更换键名
          const newItem = {}
          newItem.deptId = item.deptId
          newItem.deptName = item.deptName
          newItem.pDeptId = item.pDeptId
          newItem.pDeptName = item.pDeptName
          newItem.Description = item.Description
          let isChild = false;
          // 区分父集元素还是子集元素
          for ( let i of data ) {
            if (item.pDeptId === i.deptId){
              isChild = true;
            }
          }
          if(isChild){
            this.childrenTemp.push(newItem)
          }else{
            this.parentsTemp.push(newItem)
          }
        }
      })
      // 父级元素插入子集
      const listInfo = this.parentsTemp.map( item => {
        item.children = []
        for( let i of this.childrenTemp ){
          if(item.deptId === i.pDeptId){
            item.children.push(i)
          }
        }
        return item
      })
      return listInfo
    },
    query() {
      let data = {}
      data.url = "/api/GetDeptInfo"
      data.payload = {
        "regDate": this.$store.state.appointment.date.day,//上一步的选择日期
        "type": this.$store.state.appointment.date.type,//选择日期为当天传1、挂号 ，其余日期传2、预约挂号
         "termId": this.$store.state.terminfo.terminfo.termId,
        "hisOperNo": this.$store.state.terminfo.terminfo.hisOperNo,
      }
      queryDepartment(data).then(res => {
        this.listInfo = this.formatData(res.data)
        this.deptTotal = this.listInfo[0].children.length
        this.deptList = this.listInfo[0].children.slice(this.deptCurrent*this.deptSize, (this.deptCurrent+1)*this.deptSize)
        this.setPagination()
      })
    },
    // 加载页面信息及设置箭头
    setPagination(){
      if (this.listInfo.length > (this.currentPage+1)*this.pageSize){
        this.showDownArrow = true
      }else{
        this.showDownArrow = false
      }
      if (this.currentPage>0){
        this.showUpArrow = true
      }else{
        this.showUpArrow = false
      }
      this.pageList = this.listInfo.slice(this.currentPage*this.pageSize, (this.currentPage+1)*this.pageSize)
    },
    // 翻页
    pageTurning(dir) {
      let total = this.listInfo.length
      if(dir==="down"){
        if(total> this.pageSize){
          this.currentPage++
        }
      }else if(dir==="up"){
        if(this.currentPage>=1){
          this.currentPage--
        }   
      }
      this.setPagination()
    },
    // 选择科室按钮分页
    deptSizeChange(size,index) {
      this.deptSize = size
      console.log("sizesize",size,index)
      this.deptList = this.pageList[index].children.slice(this.deptCurrent*this.deptSize, (this.deptCurrent+1)*this.deptSize)
    },
    deptCurrentChange(page,index) {
      console.log("pagepagepage",page,index)
      this.deptCurrent = page-1
      this.deptList = this.pageList[index].children.slice(this.deptCurrent*this.deptSize, (this.deptCurrent+1)*this.deptSize)
    }
  }
};
</script>

<style scoped>
  .dept-wrap{
    position: absolute;
    left: 0;
    top: 46px;
    bottom: 0;
    width: 100%;
    background: #fff;
    padding: 40px 40px 40px 40px;
    box-sizing: border-box;
  }
  .slide-arrow{
    position: fixed;
    left: 86px;
    font-size: 32px;
    font-weight: bold;
    color: #2888ef;
  }
  .slide-up{
    top: 110px;
  }
  .slide-down{
    bottom: 120px;
  }
</style>
<style>
  .dept-wrap .el-tabs__item{
    font-size: 18px;
    font-weight: bold;
    height: 58px;
    line-height: 58px;
  }
</style>